<template>
  <div class="container index-container">
    <el-row :gutter="20">
      <labels ref="labels" />
      <el-col :xs="24" :lg="19">
        <div class="right-content">
          <el-card class="box-card" v-for="item in articles.list" :key="item.id">
            <div slot="header">
              <router-link :to="'/article/'+item.id" class="el-link el-link--default">
                {{item.title}}
                <span class="left">
                  <label-tag :label="item.labels" />
                </span>
              </router-link>
            </div>
            <div>{{item.content|contentFormat}}<router-link :to="'/article/'+item.id" class="el-link el-link--default">查看明细</router-link>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Labels from '@/views/Index/Core/Label'
import LabelTag from '@/components/Labels'
import { strLeft } from '@/utils/string'

export default {
  components: {
    Labels,
    LabelTag
  },
  data () {
    return {
      articles: []
    }
  },
  methods: {
    loadData () {
      let request = { pageNum: 1, pageSize: 30, sortby: 'updateTime', order: 'desc' }
      if (this.label !== undefined) {
        request.params = { labelId: this.label }
      }
      this.$api.index.getArticles(request).then((res) => {
        this.articles = res.data
      })
    }
  },
  mounted () {
    this.loadData()
  },
  watch: {
    label (val) {
      this.loadData()
    }
  },
  filters: {
    contentFormat: value => {
      return strLeft(value, 80)
    }
  },
  computed: {
    label () {
      return this.$route.params.id
    }
  }
}
</script>

<style lang="scss">
.index-container {
  .el-card__header {
    .el-tag {
      margin-left: 10px;
    }
  }
}
</style>
